<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  img{width: 100px;position: absolute;top: 200px;}
  </style>
  <script type="text/javascript">
    /*
       获取对象的属性值;
    */
    function getstyle(obj,attr){
      return obj.currentstyle ? obj.currentstyle[attr] : getComputedStyle(obj)[attr];
    }
    /*
       @obj      对象;
       @attr     对象某一属性的值;
       @shake    要执行事件的函数;
    */
    function shake(obj,attr){
      var pos = parseInt(getstyle(obj,attr));
      var abc = pos;
      var arr = [];
      var num = 0;
      for (var i = 20; i > 0; i -= 2) {
        arr.push(i,-i);
      };
      arr.push(0);
      obj.shake = setInterval(function(){
        obj.style[attr] = pos + arr[num] + 'px';
        num++;
        if(num === arr.length){
          clearInterval(obj.shake);
          setTimeout(function(){
            obj.onmouseover = function(){
              shake(this,'top');
              this.onmouseover = null;
            }
          },1)
        }
      },50)
    }
    window.onload = function (){
      var Img = document.getElementsByTagName('img');
       /*
          用for循环遍历出图片并且给图片一个left值;
       */
      for (var i = 0; i < Img.length; i++) {
        Img[i].style.left = 20 + 120 * i + 'px';
        Img[i].onmouseover = function(){
          shake(this,'top');
          this.onmouseover = null;
        }
      }; 
    }
  </script>
</head>
<body>
  <img src="images/1.jpg">
  <img src="images/2.jpg">
  <img src="images/3.jpg">
  <img src="images/4.jpg">
  <img src="images/5.jpg">
  <img src="images/1.png">
  <img src="images/2.png">
  <img src="images/3.png">
  <img src="images/4.png">
</body>
</html>